<script setup lang="ts">
import RegisterDetailVierw from "@/components/RegisterDetailVierw.vue";
import {ref} from "vue";

let userName = ref('张三')
let userAge = ref(20)

import ChildComponent from "@/components/ChildComponent.vue";

let childRef = ref()
let getChildCounter = ref(0)

function getChildMethod() {
  if (childRef.value) {
    childRef.value.callChildMethod() // 调用子组件的方法
    getChildCounter.value = childRef.value.count // 获取子组件的计数
  }
}

</script>

<template>
  <button @click="getChildMethod">父组件调用子组件方法按钮</button>
  <div>在父组件获取子组件的计数：{{ getChildCounter }}</div>
  <ChildComponent ref="childRef"></ChildComponent>

  <hr>
  <h3>表单父组件</h3>

  <div>用户的姓名：{{ userName }}</div>
  <div>用户的年龄：{{ userAge }}</div>
  <hr>
  <RegisterDetailVierw
      v-model:name="userName"
      v-model:age="userAge"
  ></RegisterDetailVierw>


</template>

<style scoped>

</style>
